import React, {Component} from 'react';
import {connect} from 'dva';
import {Row, Col, Icon, Card, Tabs, Table, Radio, DatePicker, Tooltip, Menu, Dropdown} from 'antd';
import numeral from 'numeral';
import {
    ChartCard, yuan, MiniArea, MiniBar, MiniProgress, Field, Bar, Pie, TimelineChart,
} from '../../components/Charts';
import Trend from '../../components/Trend';
import NumberInfo from '../../components/NumberInfo';
import {getTimeDistance} from '../../utils/utils';

import styles from './Analysis.less';
import dashboard from "../../models/dashboard";

const {TabPane} = Tabs;
const {RangePicker} = DatePicker;

const rankingListData = [];
for (let i = 0; i < 7; i += 1) {
    rankingListData.push({
        title: `工专路 ${i} 号店`,
        total: 323234,
    });
}

@connect(state => ({

    dashboard: state.dashboard,
}))
export default class Analysis extends Component {
    state = {
        loading: true,
        salesType: 'all',
        currentTabKey: '',
        rangePickerValue: [],
    }

    componentDidMount() {
        this.props.dispatch({
            type: 'dashboard/fetch',
        }).then(() => this.setState({loading: false}));
    }

    componentDidCatch(error, errorInfo) {
        console.log(error,errorInfo)
    }

    componentWillUnmount() {
        const {dispatch} = this.props;
        dispatch({
            type: 'chart/clear',
        });
    }

    handleChangeSalesType = (e) => {
        this.setState({
            salesType: e.target.value,
        });
    }

    handleTabChange = (key) => {
        this.setState({
            currentTabKey: key,
        });
    }

    handleRangePickerChange = (rangePickerValue) => {
        this.setState({
            rangePickerValue,
        });

        this.props.dispatch({
            type: 'chart/fetchSalesData',
        });
    }

    selectDate = (type) => {
        this.setState({
            rangePickerValue: getTimeDistance(type),
        });

        this.props.dispatch({
            type: 'chart/fetchSalesData',
        });
    }

    isActive(type) {
        const {rangePickerValue} = this.state;
        const value = getTimeDistance(type);
        if (!rangePickerValue[0] || !rangePickerValue[1]) {
            return;
        }
        if (rangePickerValue[0].isSame(value[0], 'day') && rangePickerValue[1].isSame(value[1], 'day')) {
            return styles.currentDate;
        }
    }

    render() {
        const {rangePickerValue, salesType, currentTabKey, loading} = this.state;
        const {chart, dashboard: {user_count, new_user_count, day, week, total_money, day_money, pay_count}} = this.props;


        // const salesPieData = salesType === 'all' ?
        //   salesTypeData
        //   :
        //   (salesType === 'online' ? salesTypeDataOnline : salesTypeDataOffline);

        const menu = (
            <Menu>
                <Menu.Item>操作一</Menu.Item>
                <Menu.Item>操作二</Menu.Item>
            </Menu>
        );

        const iconGroup = (
            <span className={styles.iconGroup}>
        <Dropdown overlay={menu} placement="bottomRight">
          <Icon type="ellipsis"/>
        </Dropdown>
      </span>
        );

        const salesExtra = (
            <div className={styles.salesExtraWrap}>
                <div className={styles.salesExtra}>
                    <a className={this.isActive('today')} onClick={() => this.selectDate('today')}>
                        今日
                    </a>
                    <a className={this.isActive('week')} onClick={() => this.selectDate('week')}>
                        本周
                    </a>
                    <a className={this.isActive('month')} onClick={() => this.selectDate('month')}>
                        本月
                    </a>
                    <a className={this.isActive('year')} onClick={() => this.selectDate('year')}>
                        全年
                    </a>
                </div>
                <RangePicker
                    value={rangePickerValue}
                    onChange={this.handleRangePickerChange}
                    style={{width: 256}}
                />
            </div>
        );

        const columns = [
            {
                title: '排名',
                dataIndex: 'index',
                key: 'index',
            },
            {
                title: '搜索关键词',
                dataIndex: 'keyword',
                key: 'keyword',
                render: text => <a href="/">{text}</a>,
            },
            {
                title: '用户数',
                dataIndex: 'count',
                key: 'count',
                sorter: (a, b) => a.count - b.count,
                className: styles.alignRight,
            },
            {
                title: '周涨幅',
                dataIndex: 'range',
                key: 'range',
                sorter: (a, b) => a.range - b.range,
                render: (text, record) => (
                    <Trend flag={record.status === 1 ? 'down' : 'up'}>
                        <span style={{marginRight: 4}}>{text}%</span>
                    </Trend>
                ),
                className: styles.alignRight,
            },
        ];

        // const activeKey = currentTabKey || (offlineData[0] && offlineData[0].name);

        const CustomTab = ({data, currentTabKey: currentKey}) => (
            <Row gutter={8} style={{width: 138, margin: '8px 0'}}>
                <Col span={12}>
                    <NumberInfo
                        title={data.name}
                        subTitle="转化率"
                        gap={2}
                        total={`${data.cvr * 100}%`}
                        theme={(currentKey !== data.name) && 'light'}
                    />
                </Col>
                <Col span={12} style={{paddingTop: 36}}>
                    <Pie
                        animate={false}
                        color={(currentKey !== data.name) && '#BDE4FF'}
                        inner={0.55}
                        tooltip={false}
                        margin={[0, 0, 0, 0]}
                        percent={data.cvr * 100}
                        height={64}
                    />
                </Col>
            </Row>
        );

        const topColResponsiveProps = {
            xs: 24,
            sm: 12,
            md: 12,
            lg: 12,
            xl: 6,
            style: {marginBottom: 24},
        };

        return (
            <div>
                <Row gutter={24}>
                    <Col {...topColResponsiveProps}>
                        <ChartCard
                            bordered={false}
                            title="总销售额"
                            action={<Tooltip title="指标说明"><Icon type="info-circle-o"/></Tooltip>}
                            total={yuan(total_money)}
                            footer={<Field label="日均销售额" value={`￥${numeral(day_money).format('0,0')}`}/>}
                            contentHeight={46}
                        >
                            <Trend flag="up" style={{marginRight: 16}}>
                                周同比<span className={styles.trendText}>{week}%</span>
                            </Trend>
                            <Trend flag="down">
                                日环比<span className={styles.trendText}>{day}%</span>
                            </Trend>
                        </ChartCard>
                    </Col>
                    <Col {...topColResponsiveProps}>
                        <ChartCard
                            bordered={false}
                            title="会员数量"
                            action={<Tooltip title="会员数量"><Icon type="info-circle-o"/></Tooltip>}
                            total={user_count}
                            footer={<Field label="新增会员数" value={new_user_count}/>}
                            contentHeight={46}
                        >
                            {/*<MiniArea*/}
                            {/*color="#975FE4"*/}
                            {/*height={46}*/}
                            {/*data={visitData}*/}
                            {/*/>*/}
                        </ChartCard>
                    </Col>
                    <Col {...topColResponsiveProps}>
                        <ChartCard
                            bordered={false}
                            title="支付笔数"
                            action={<Tooltip title="指标说明"><Icon type="info-circle-o"/></Tooltip>}
                            total={pay_count}
                            footer={<Field label="转化率" value="60%"/>}
                            contentHeight={46}
                        >
                            {/*<MiniBar*/}
                            {/*height={46}*/}
                            {/*data={visitData}*/}
                            {/*/>*/}
                        </ChartCard>
                    </Col>
                    {/*<Col {...topColResponsiveProps}>*/}
                    {/*<ChartCard*/}
                    {/*bordered={false}*/}
                    {/*title="运营活动效果"*/}
                    {/*action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}*/}
                    {/*total="78%"*/}
                    {/*footer={*/}
                    {/*<div style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>*/}
                    {/*<Trend flag="up" style={{ marginRight: 16 }}>*/}
                    {/*周同比<span className={styles.trendText}>12%</span>*/}
                    {/*</Trend>*/}
                    {/*<Trend flag="down">*/}
                    {/*日环比<span className={styles.trendText}>11%</span>*/}
                    {/*</Trend>*/}
                    {/*</div>*/}
                    {/*}*/}
                    {/*contentHeight={46}*/}
                    {/*>*/}
                    {/*<MiniProgress percent={78} strokeWidth={8} target={80} color="#13C2C2" />*/}
                    {/*</ChartCard>*/}
                    {/*</Col>*/}
                </Row>


                {/*<Row gutter={24}>*/}
                {/*<Col xl={12} lg={24} md={24} sm={24} xs={24}>*/}
                {/*<Card*/}
                {/*loading={loading}*/}
                {/*bordered={false}*/}
                {/*title="线上热门搜索"*/}
                {/*extra={iconGroup}*/}
                {/*style={{ marginTop: 24 }}*/}
                {/*>*/}
                {/*<Row gutter={68}>*/}
                {/*<Col sm={12} xs={24} style={{ marginBottom: 24 }}>*/}
                {/*<NumberInfo*/}
                {/*subTitle={*/}
                {/*<span>*/}
                {/*搜索用户数*/}
                {/*<Tooltip title="指标文案">*/}
                {/*<Icon style={{ marginLeft: 8 }} type="info-circle-o" />*/}
                {/*</Tooltip>*/}
                {/*</span>*/}
                {/*}*/}
                {/*gap={8}*/}
                {/*total={numeral(12321).format('0,0')}*/}
                {/*status="up"*/}
                {/*subTotal={17.1}*/}
                {/*/>*/}
                {/*<MiniArea*/}
                {/*line*/}
                {/*height={45}*/}
                {/*data={visitData2}*/}
                {/*/>*/}
                {/*</Col>*/}
                {/*<Col sm={12} xs={24} style={{ marginBottom: 24 }}>*/}
                {/*<NumberInfo*/}
                {/*subTitle="人均搜索次数"*/}
                {/*total={2.7}*/}
                {/*status="down"*/}
                {/*subTotal={26.2}*/}
                {/*gap={8}*/}
                {/*/>*/}
                {/*<MiniArea*/}
                {/*line*/}
                {/*height={45}*/}
                {/*data={visitData2}*/}
                {/*/>*/}
                {/*</Col>*/}
                {/*</Row>*/}
                {/*<Table*/}
                {/*rowKey={record => record.index}*/}
                {/*size="small"*/}
                {/*columns={columns}*/}
                {/*dataSource={searchData}*/}
                {/*pagination={{*/}
                {/*style: { marginBottom: 0 },*/}
                {/*pageSize: 5,*/}
                {/*}}*/}
                {/*/>*/}
                {/*</Card>*/}
                {/*</Col>*/}
                {/*<Col xl={12} lg={24} md={24} sm={24} xs={24}>*/}
                {/*<Card*/}
                {/*loading={loading}*/}
                {/*className={styles.salesCard}*/}
                {/*bordered={false}*/}
                {/*title="销售额类别占比"*/}
                {/*bodyStyle={{ padding: 24 }}*/}
                {/*extra={(*/}
                {/*<div className={styles.salesCardExtra}>*/}
                {/*{iconGroup}*/}
                {/*<div className={styles.salesTypeRadio}>*/}
                {/*<Radio.Group value={salesType} onChange={this.handleChangeSalesType}>*/}
                {/*<Radio.Button value="all">全部渠道</Radio.Button>*/}
                {/*<Radio.Button value="online">线上</Radio.Button>*/}
                {/*<Radio.Button value="offline">门店</Radio.Button>*/}
                {/*</Radio.Group>*/}
                {/*</div>*/}
                {/*</div>*/}
                {/*)}*/}
                {/*style={{ marginTop: 24, minHeight: 509 }}*/}
                {/*>*/}
                {/*<h4 style={{ marginTop: 8, marginBottom: 32 }}>销售额</h4>*/}
                {/*<Pie*/}
                {/*hasLegend*/}
                {/*subTitle="销售额"*/}
                {/*total={yuan(salesPieData.reduce((pre, now) => now.y + pre, 0))}*/}
                {/*data={salesPieData}*/}
                {/*valueFormat={val => yuan(val)}*/}
                {/*height={248}*/}
                {/*lineWidth={4}*/}
                {/*/>*/}
                {/*</Card>*/}
                {/*</Col>*/}
                {/*</Row>*/}

                {/*<Card*/}
                {/*loading={loading}*/}
                {/*className={styles.offlineCard}*/}
                {/*bordered={false}*/}
                {/*bodyStyle={{ padding: '0 0 32px 0' }}*/}
                {/*style={{ marginTop: 32 }}*/}
                {/*>*/}
                {/*<Tabs*/}
                {/*activeKey={activeKey}*/}
                {/*onChange={this.handleTabChange}*/}
                {/*>*/}
                {/*{*/}
                {/*offlineData.map(shop => (*/}
                {/*<TabPane*/}
                {/*tab={<CustomTab data={shop} currentTabKey={activeKey} />}*/}
                {/*key={shop.name}*/}
                {/*>*/}
                {/*<div style={{ padding: '0 24px' }}>*/}
                {/*<TimelineChart*/}
                {/*data={offlineChartData}*/}
                {/*titleMap={{ y1: '客流量', y2: '支付笔数' }}*/}
                {/*/>*/}
                {/*</div>*/}
                {/*</TabPane>)*/}
                {/*)*/}
                {/*}*/}
                {/*</Tabs>*/}
                {/*</Card>*/}
            </div>
        );
    }
}
